<!doctype html>
<html lang="en" data-accent-color="energy">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
    <meta name="mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <link rel="apple-touch-icon" href="/icons/512.png" />
    <link rel="shortcut icon" type="image/svg+xml" href="/favicon.svg" />
    <link rel="manifest" href="manifest.json" />
    <meta name="theme-color" content="#F3F4F6" media="(prefers-color-scheme: light)" />
    <meta name="theme-color" content="#1f2937" media="(prefers-color-scheme: dark)" />
    <meta name="apple-mobile-web-app-status-bar-style" content="default" />
    <link
      rel="preload"
      as="font"
      crossorigin="anonymous"
      href="/nunito-latin-variable-wghtOnly-normal.woff2"
      type="font/woff2"
    />
    <link
      rel="preload"
      as="font"
      crossorigin="anonymous"
      href="/nunito-latin-ext-variable-wghtOnly-normal.woff2"
      type="font/woff2"
    />
    <link
      rel="preload"
      as="font"
      crossorigin="anonymous"
      href="/jetbrains-mono-wghtOnly-normal.woff2"
      type="font/woff2"
    />
    <script>
      window.env = {
        PUBLIC_API_URL: "{{PUBLIC_API_URL}}",
        PUBLIC_APP_URL: "{{PUBLIC_APP_URL}}",
        PUBLIC_ASSETS_URL: "{{PUBLIC_ASSETS_URL}}",
        PUBLIC_COLLAB_URL: "{{PUBLIC_COLLAB_URL}}",
        PUBLIC_POSTHOG_TOKEN: "{{PUBLIC_POSTHOG_TOKEN}}",
        PUBLIC_DISABLE_ANALYTICS: "{{PUBLIC_DISABLE_ANALYTICS}}"
      };
    </script>
    <script type="module">
      try {
        await fetch("/session/refresh", { method: "POST" });
        const response = await fetch(`${window.env.PUBLIC_API_URL}/user-settings`, {
          credentials: "include"
        });
        if (!response.ok) throw new Error();
        const settings = await response.json();

        document.documentElement.dataset.accentColor = settings.accentColor || "energy";
        if (settings.uiTheme === "dark") {
          document.documentElement.classList.add("dark");
        } else if (settings.uiTheme === "auto") {
          if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
            document.documentElement.classList.add("dark");
          }
        }
      } catch (error) {
        if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
          document.documentElement.classList.add("dark");
        }
      }
    </script>
    {{#if VRITE_CLOUD}}
    <script async src="https://www.googletagmanager.com/gtag/js?id=AW-16595937003"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag() {
        dataLayer.push(arguments);
      }
      gtag("js", new Date());

      gtag("config", "AW-16595937003");
    </script>
    {{/if}}
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <div id="sandbox" class="hidden"></div>
    <div id="dropdowns"></div>
    <div id="bottom-space-filler"></div>
    <script src="/src/index.tsx" type="module"></script>
  </body>
</html>
